/*
  学习目标：props校验   

  使用步骤
1. 导入 prop-types 包 （不用下载，脚手架自带）
2. 使用：`组件名.propTypes = {}`  来给组件的props添加校验规则对象
3. 规则的数据类型，通过 `PropTypes`  对象来指定
 

### 约束规则
1. 常见类型：array、bool、func、number、object、string
2. React元素类型：element
3. 必填项：isRequired
4. 特定结构的对象：shape   
*/
import React, { Component } from 'react';
export default class App extends Component {
    render() {
        return (
            <div>
                <Hello></Hello>
            </div >
        );
    }
}


function Hello(props) {
    return <div>
        此处展示props的默认值：{props.pageSize}
    </div>
}
// 设置默认
Hello.defaultProps = {
    pageSize: 10
}

// export class Hello extends Component {
//     // 设置默认
//     static defaultProps = {
//     pageSize: 10
// }
//     static propTypes = {
//         // 字符串
//         title: PropTypes.string,
//         // 数字
//         count: PropTypes.number,
//         // 布尔值
//         isShow: PropTypes.bool,
//         // 函数
//         fn: PropTypes.func,
//         // JSX
//         child: PropTypes.element,
//         obj: PropTypes.shape({
//             color: PropTypes.string.isRequired,
//             fontSize: PropTypes.number.isRequired

//         })
//     }
//     render() {
//         const { child } = this.props
//         return (
//             <div>
//                 {child}
//             </div>
//         )
//     }
// }


// Hello.propTypes = {
//     // 字符串
//     title: PropTypes.string,
//     // 数字
//     count: PropTypes.number,
//     // 布尔值
//     isShow: PropTypes.bool,
//     // 函数
//     fn: PropTypes.func,
//     // JSX
//     child: PropTypes.element,
//     obj: PropTypes.shape({
//         color: PropTypes.string.isRequired,
//         fontSize: PropTypes.number.isRequired

//     })
// }